<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /* 最大盒子 */
        .box{
            width: 800px;
            height: 896px;
            border: 1px solid;
            margin: auto;
        }
        ul{
            
            width:800px;
            height: 50px;
            /* border: 1px  solid rgb(8, 8, 8); */
            
            display: flex;
            justify-content: center;
            list-style: none;
            /* 去除小黑点 */   
        }
        li,img{
            margin: 10px;
        }
        /* 中间小字 */
        .box1{
            text-align: center;
            font-weight: 900;
        }
        /* 点击登录注册盒子 */
        .boxz{
            width: 400px;
            height: 30px; 
            display: flex;
            justify-content: center;
            text-align: center;
        }
        /* 登录 */
        .boxx{
            width: 400px;
            height: 30px;
            display: flex;
            justify-content: center;
            text-align: center;
          
            
        }
        .boxzz{
            width: 80px;
            height: 25px;
            background-color: rgb(53, 211, 223);  
        }
        .boxzx{
            width: 80px;
            height: 25px;
            background-color: rgb(233, 224, 213);
            /* 外边距 */
            margin-left: 50px;
        }
        .boxtow{
            /* 利用弹性将文本框右居中 */
            width: 350px;
            height: 170px;
          /* border:1px solid black; */
         display: flex;
        
            flex-direction: column;
            align-items: flex-end;
            justify-content: space-evenly;           
        }
        /* 验证码文本框 */
       .q{
           width: 30px;
       }
       /* 图片 */
       .cs{
           width: 800px;
           height: 30px;
           display: flex;
           justify-content: center;
           position: relative;
           left: 180px;
           top: -230px;
       }
      
       /* 忘记密码 */
       .boxzc{
        width: 80px;
            height: 25px;
           
            /* 外边距 */
            margin-left: 50px;
            color: brown;
       }
       /* 最下面导航栏 */
       .dao{
           width: 800px;
           height: 150px;
           /* border: 1px solid black; */
           display: flex;
           justify-content: space-evenly;
           /* margin: 20px; */
           margin-top: 2em;
       }
       .s{
           width: 100px;
           height: 130px;
          /* border: 1px solid black; */
         
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
       }
       .ps{
           font-size: 20px;
           font-weight: bold;
       }
       /* 最后的边框 */
       .zui{
           width: 800px;
           height: 90px;
           background-color: rgb(81, 81, 207);
           display: flex;
           justify-content: center;
       }
       .zi{
           line-height: 90px;         
       }
    </style>
</head>
<body>
<div class="box">
 <!-- 首页导航 -->
    <ul>
        <img src="https://pic.imgdb.cn/item/621214a42ab3f51d91b918aa.png" alt=""height="40px">
        <li>首页</li>
        <li>鼎搜投资</li>
        <li>鼎搜服务</li>
        <li>鼎搜动态</li>
        <li>鼎搜诚聘</li>
        <li>鼎搜服务</li>
        <img src="https://pic.imgdb.cn/item/621214d12ab3f51d91b97de3.png" alt="" height="20px">
    </ul>
        <img src="https://pic.imgdb.cn/item/621214e92ab3f51d91b9b1f2.png" alt="" width="790px" height="270px" >
        <div class="box1">我要转让</div>
    <div class="boxz">
      <div class=" boxzz">点击登录</div>
      <div class=" boxzx">点击注册</div>
    </div>
<!-- 用户登录栏 -->
    <div class="boxtow">
        
           <div> 用户名：<input type="text" value=""></div>
           <div>   密码：<input type="password" required> </div>
           <div> 验证码:<input class="q" type="text">看不清？点击更换 </div>
           <div> 有效期：<input type="radio" name="gender">一个月
                        <input type="radio" name="gender">一周
                        <input type="radio" name="gender">一天
                        <input type="radio" name="gender">即时
           </div>
    </div>
    <!-- 登录 -->
    <div class="boxx">
      <div class="boxzz">登录</div>
      <div class="boxzc">忘记密码？</div>
    </div>
<!-- 中间图片 -->
    <div class="cs">
      <div>
        <img src="https://pic.imgdb.cn/item/621217a22ab3f51d91c0a274.png" alt="">
      </div>
    </div>
    <!-- 底部导航 -->
    <span class="dao">      
        <div class="s ">
            <div class="ps">简介</div>
            <div>鼎搜简介</div>
            <div>鼎搜服务</div>
            <div>会员身份实名认证</div>
            
        </div>
        <div class="s">
            <div class="ps">帮助</div>
            <div>用户注册</div>
            <div>关于鼎搜</div>
            <div>在线咨询</div>
        </div>
        <div class="s ">
            <div class="ps">共赢</div>
            <div>网站合作</div>
            <div>用户协议</div>
            <div>会员身份实名认证</div>
        </div>
        <div class="s">
            <div class="ps">导航</div>
            <div>地图首页</div>
            <div>职能分类</div>
            <div>企业名录</div>
        </div>
        <img src="https://pic.imgdb.cn/item/6212164c2ab3f51d91bd31c5.png" alt="">
    </span>
   <div class="zui">
      <span class="zi"> Copyright  @2015 鼎搜网(www.dingsoo.com) 版权所有</span>
   </div> 
</div>
</body>
</html>